import React, { useEffect, useState } from "react";
import {ConfigProvider, Table, Pagination} from "antd";
import PubSub from 'pubsub-js'
import axios from "axios";
import "../../css/data_table.css"

const DataTable = ()=>{

    const [timeRange,setTimeRange] = useState('1D');
    const [sort,setSort] = useState({
        sortBy:'data',
        sortOrder:false,  //默认降序，true为升序
    });
    const [data,setData] = useState([]);
    const [total,setTotal] = useState({
        totalBuy:0,
        totalSell:0,
        netQuantity:0,
        totalBuyNotional:0,
        totalSellNotional:0,
        netNotional:0,
        recordsNum:0
    })
    
    const columns=[
        {title:'Date', dataIndex:'date', key:'date', sorter: (a, b) => a.data - b.data,},
        {title:'Client Name', dataIndex:'client_name', key:'client_name'},
        {title:'Client Side', dataIndex:'client_side', key:'client_side'},
        {title:'Ticker', dataIndex:'ticker', key:'ticker'},
        {title:'RIC', dataIndex:'RIC', key:'RIC'},
        {title:'Size', dataIndex:'size', key:'size',sorter: (a, b) => a.size - b.size},
        {title:'Price', dataIndex:'price', key:'price', sorter: (a, b) => a.price - b.price},
        {title:'Notional USD', dataIndex:'notional_USD', key:'notional_USD',sorter: (a, b) => a.notional_USD - b.notional_USD},
        {title:'Currency', dataIndex:'currency', key:'currency'},
        {title:'Issue Sector', dataIndex:'issue_sector', key:'issue_sector'},
        {title:'Salesperson', dataIndex:'sales_person', key:'sales_person'},
        {title:'HT/PT', dataIndex:'ht_pt', key:'ht_pt'},
    ];
    console.log(sessionStorage.getItem("token"))
    //frequency更新时执行
    useEffect(()=>{
        axios({
            method:'get',
            url:'http://localhost:5052/api/trade/trade/tradeInfo',
            params:{
                timeRange:timeRange,
                // sortBy:sort.sortBy,
                // sortOrder:sort.sortOrder
            },
            headers: {'Content-Type':'application/x-www-form-urlencoded'}
        }).then(res=>{
            const resData = res.data.data.tradeVOList.map((item)=>{
                const newItem = {
                    date:item.tradeDate,
                    client_name:item.tradeClientName,
                    client_side:item.tradeType,
                    ticker:item.ticker,
                    RIC:item.ric,
                    size:item.tradeSize,
                    price:item.price,
                    notional_USD:item.notionalUSD,
                    currency:item.tradeCurrency,
                    issue_sector:item.issuerSector,
                    sales_person:item.tradeSalesPerson,
                    ht_pt:item.tradeHtPt,
                };
                return newItem;
            })
            setData(resData);
            setTotal({
                totalBuy:res.data.data.totalBuy,
                totalSell:res.data.data.totalSell,
                netQuantity:res.data.data.netQuantity,
                totalBuyNotional:res.data.data.totalBuyNotional,
                totalSellNotional:res.data.data.totalSellNotional,
                netNotional:res.data.data.netNotional,
                recordsNum:res.data.data.recordsNum
            })
            console.log(resData)
            console.log("请求成功",res.data);
        }).catch(err=>{
            console.log("请求失败",err);
        })
        },[timeRange])

    //组件挂载的时候执行
    useEffect(()=>{
        //订阅消息
        PubSub.subscribe('frequencyChange',(_,fre)=>(
            // console.log(fre),
            setTimeRange(fre.timeRange)
        ))
        // console.log("消息订阅成功")
    },[])
    // const [tableParams, setTableParams] = useState({
    //     pagination: {
    //       current: 1,
    //       pageSize: 10,
    //       total:100,
    //     },
    //   });

    const onChange = (pagination, sorter, extra) => {
        console.log('params', pagination, sorter, extra);
    };

    return(
        <div style={{position: "flex"}}>
            <div className="data-wrapper">
                <div className="data-items">
                    <span className="data-green">
                        Total Buy:
                        <span className="data-digit">{total.totalBuy}</span>
                    </span>
                    <span className="data-red">
                        Total Sell:
                        <span className="data-digit">{total.totalSell}</span>
                    </span>
                    <span className="data-blue">
                        Net Quantity:
                        <span className="data-digit">{total.netQuantity}</span>
                    </span>
                    <span className="data-green">
                        Total Buy Notional:
                        <span className="data-digit">{total.totalBuyNotional}</span>
                    </span>
                    <span className="data-red">
                        Total Sell Notional:
                        <span className="data-digit">{total.totalSellNotional}</span>
                    </span>
                    <span className="data-blue">
                        NetNotional:
                        <span className="data-digit">{total.netNotional}</span>
                    </span>
                </div>
                <div>
                    Total Records:
                    <span className="data-records">{total.recordsNum}</span>
                </div>
            </div>
            <ConfigProvider
                theme={{
                    components: {
                        Pagination: {
                            itemActiveBg:'#ffffff', //页码激活态背景色
                            itemActiveBgDisabled:'pink', //页码激活态禁用状态背景色
                            itemActiveColorDisabled:'pink', //页码激活态禁用状态文字颜色
                            itemBg:'pink', //页码选项背景色
                            itemInputBg:'pink', //输入框背景色
                            itemLinkBg:'pink', //页码链接背景色
                        },
                    },
                    token: {
                        colorBgContainer:'#2b3d4e', //表格背景色
                        colorTextHeading:'#d9e2ea', //表头字体色
                        fontSize: 12, //字体大小
                        colorBorderSecondary:'#34495f', //表格内细线颜色
                        colorText:'#ffffff', //分页字体颜色
                    }}}>
                <Table 
                    columns={columns}
                    dataSource={data}
                    pagination={{position:["bottomCenter"]}}
                    defaultPageSize={5}
                    onChange={onChange}
                />
            </ConfigProvider>
        </div> 
    )
}

export default DataTable